<template>
    <!-- 日销售流水 -->
    <view
        class="item-info"
        :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view class="title"
                    >{{ title
                    }}{{ type == 3 ? "营收" : type == 4 ? "消耗" : "" }}</view
                >
                <view class="close" @click="close">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <view class="cate-list comm-list" v-infinite-scroll="loadFun">
                <view class="info-box">
                    <!-- <view>{{tSaleTxt}}</view>
					<view class="a-txt">{{count.amount}}</view> -->
                    <view class="s-r-box">
                        <view class="s-r-b">
                            <view>{{ tSaleTxt }}</view>
                            <view class="a-txt">{{ count.amount }}</view>
                        </view>
                        <view class="s-r-b s-r-b-pl" v-if="type == 1">
                            <view>{{ seReturnTxt }}</view>
                            <view class="a-txt a-txt-red">{{
                                count.amount_th
                            }}</view>
                        </view>
                    </view>
                    <view class="i-f-box">
                        <view class="txt-box" v-if="type == 1 || type == 3">
                            <view>{{ grossProfitTxt }}</view>
                            <view>{{ count.profit }}</view>
                        </view>

                        <view class="txt-box">
                            <view>{{ salesVolumeTxt }}</view>
                            <view>{{ count.number }}</view>
                        </view>
                        <view class="txt-box">
                            <view>{{ oddNumberTxt }}</view>
                            <view>{{ count.num_od }}</view>
                        </view>
                        <view class="txt-box" v-if="type == 4">
                            <view>成本</view>
                            <view>{{ count.cost }}</view>
                        </view>
                    </view>
                </view>
                <view class="d-box" >
                    <view class="d-info">
                        <view>{{ dInfo && dInfo.timestr }}</view>
                        <view
                            >{{
                                type == 3
                                    ? "销售额："
                                    : type == 4
                                    ? "消耗额："
                                    : ""
                            }}{{ dInfo && dInfo.amount }}</view
                        >
                    </view>
                    <view
                        class="d-list"
                        v-for="(item, index) in orderListInfo"
                        :key="index"
                        @click="goUrl(item.customerid)"
                    >
                        <view class="t-n-c">
                            <view
                                >{{ item.h_i }}{{ " " }}{{ item.customername
                                }}{{ " " }}{{ item.company }}</view
                            >
                            <view>{{ item.amount }}</view>
                        </view>
                        <view
                            class="g-list"
                            v-for="(item1, index1) in item.goods_ls"
                            :key="index1"
                        >
                            <image
                                class="img"
                                :src="item1.gdimg ? item1.gdimg : goodsImg"
                            ></image>
                            <div class="g-n-b-box">
                                <view class="g-n-b">
                                    <view class="name">{{ item1.gdname }}</view>
                                    <view class="brand" v-if="item1.brand">{{
                                        item1.brand
                                    }}</view>
                                    <view
                                        class="info-box-txt"
                                        v-if="item1.tlong"
                                    >
                                        <view class="info-txt"
                                            >金额：{{ item1.amount }}</view
                                        >
                                        <view class="info-txt"
                                            >次数：{{ item1.number }}</view
                                        >
                                        <view class="info-txt"
                                            >时长：{{ item1.tlong }}</view
                                        >
                                        <view class="info-txt"
                                            >{{ item1.serv_costtitle }}：{{
                                                item1.cost
                                            }}</view
                                        >
                                    </view>
                                </view>
                                <view class="u-i" v-if="item1.unit_info">{{
                                    item1.unit_info
                                }}</view>
                            </div>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <el-dialog
            title="跟进记录"
            :visible.sync="dialogVisible"
            width="50%"
            :modal="false"
        >
            <div class="FollowUpBox">
                <view class="FollowUpDiv">
                    <el-select style="width: 130px" @change="selectFun($event,'cid')" v-model="followUpParam.cid" placeholder="选择跟进类别" size="mini">
                        <el-option
                            v-for="item in txt_cat_ls"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select style="width: 130px;  margin-left: 10px;"
                        @change="selectFun($event,'ucp_ls')"
                         v-model="followUpParam.uid_cp" placeholder="   " size="mini">
                        <el-option
                            v-for="item in ucp_ls"
                            :key="item.uid"
                            :label="item.name"
                            :value="item.uid">
                        </el-option>
                    </el-select>
                    <el-select style="width: 130px; margin-left: 10px;"
                        @change="selectFun($event,'t_type')"
                        v-model="followUpParam.t_type" placeholder="选择日期" size="mini">
                        <el-option
                            v-for="item in group_ls"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button style="margin-left: 10px" @click="FollowUpListDialogIsShow('addFollowUpShow')" size="mini" type="primary">增加跟进记录</el-button>
                    <el-button size="mini" @click="FollowUpListDialogIsShow('addCategoryShow')">编辑跟进类别</el-button>
                </view>
                <FollowUpList
                    style="padding-top: 40px;"
                    :list="dataList"
                    :add_txt_cat_ls="add_txt_cat_ls"
                    :customerId="customerId"
                    ref="FollowUpList"
                    @upDataFun="upDataFun"
                ></FollowUpList>
            </div>
        </el-dialog>
    </view>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import util from "../../js/util/Util.js";

import lang from "../../js/conf/Lang.js";
import config from "@/js/conf/Config.js";
import FollowUpList from "@/components/customers/followUpList.vue";


export default {
    components: {FollowUpList},
    data() {
        return {
            type: 1,
            title: "",
            openShow: 0,
            tSaleTxt: "",
            seReturnTxt: "",

            grossProfitTxt: "",
            salesVolumeTxt: "",
            oddNumberTxt: "",

            count: {},
            dInfo: {},
            orderListInfo: [],
            goodsImg: staticConst.GOOD_IMG,

            // --------------------------
            dialogVisible: false,
            txt_cat_ls: [], // 跟进类别
            add_txt_cat_ls: [], // 添加跟进记录的选择跟进类别
            ucp_ls: [], // 经手人
            customerId: "",
            followUpParam: {
                cid: "0",
                uid_cp: "0",
                t_type: "0",
            },
            dataList: [],
        };
    },

    methods: {
        FollowUpListDialogIsShow (key) {
            this.$refs.FollowUpList[key] = true;
        },
        show(type, data) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
            if (!type) return;
            if (data.type) this.type = data.type;
            if (this.type == 1) {
                this.title = data.title + lang.businessIncomeTxt;
                this.tSaleTxt = data.title + lang.saleReport.saleTxt;
                this.seReturnTxt = data.title + lang.saleReport.returnTxt;

                this.grossProfitTxt = lang.saleReport.grossProfitTxt;
                this.salesVolumeTxt = lang.saleReport.salesVolumeTxt;
                this.oddNumberTxt = lang.saleReport.oddNumberTxt;
            } else if (this.type == 2) {
                this.title = data.title;
                this.tSaleTxt = lang.report.purchaseTxt + lang.eTxt;
                this.salesVolumeTxt = lang.saleReport.numberTxt;
                this.oddNumberTxt = lang.saleReport.oddNumberTxt;
            } else if (this.type == 3) {
                this.grossProfitTxt = lang.saleReport.grossProfitTxt;
                this.title = data.title;
                this.tSaleTxt = data.title + "销售额";
                this.salesVolumeTxt = "销量";
                this.oddNumberTxt = lang.saleReport.oddNumberTxt;
            } else if (this.type == 4) {
                this.grossProfitTxt = lang.saleReport.grossProfitTxt;
                this.title = data.title;
                this.tSaleTxt = data.title + "消耗额";
                this.salesVolumeTxt = "次数";
                this.oddNumberTxt = lang.saleReport.oddNumberTxt;
            }

            if (data.data.count) this.count = data.data.count;
            else this.count = {};
            if (
                (data.data.data && data.data.data[0]) ||
                (data.data.ls && data.data.ls[0])
            ) {
                let temp = data.data.data ? data.data.data[0] : data.data.ls[0];
                if (temp.dayinfo) this.dInfo = temp.dayinfo;
                else this.dInfo = {};
                if (temp.order_ls) this.orderListInfo = temp.order_ls;
                else this.orderListInfo = [];
            } else {
                this.dInfo = {};
                this.orderListInfo = [];
            }
        },
        loadFun() {
            this.$emit("loadFun");
        },
        close() {
            this.show();
        },
        goUrl (id) {
            this.customerId = id;
            if (!Number(this.customerId)) return this.$message.error('该用户是一名散客，无跟进记录。');
            this.dialogVisible = true;
            this.getCustomTxtLs()
        },
        async getCustomTxtLs () {
            let url = config.CUSTOM_TXT_LS; 
            let param = {
                customerid: this.customerId,
            };
            Object.keys(this.followUpParam).forEach( item=> {
                param[item] = this.followUpParam[item];
            })
            let res = await this.$api({ url: url, data: param })
            if (res.status == 1) {
                console.log(res)
                if (res.data) {
                    let data = res.data.txt_ls? res.data.txt_ls:[];
                    this.dataList = data;
                    this.txt_cat_ls = res.data.txt_cat_ls;
                    this.ucp_ls = res.data.ucp_ls;
                    this.group_ls = res.data.group_ls;
                    this.add_txt_cat_ls = JSON.parse(JSON.stringify(res.data.txt_cat_ls));
                    this.add_txt_cat_ls.shift(); // 删除数组第一位
                } else {
                    let data = res.data.txt_ls? res.data.txt_ls:[];
                    this.dataList = data;
                    // this.tabArr[this.listIndex].is_soll = true;
                }
            }
        },
        selectFun (val, key) {
            this.dataList = [];
            this.followUpParam[key] = val;
            this.getCustomTxtLs()
        },
        upDataFun (e) { // 跟新数据
            if(e.isArr == true) {
                this.dataList = [];
            }
            this.getCustomTxtLs ();
        },
    },
};
</script>
<style lang="scss">
.FollowUpBox {
    width: 100%;
    height: 65vh;
    position: relative;
    overflow-y: auto;
    
    .FollowUpDiv {
        position: fixed;
        background: #FFFFFF;
        z-index: 3;
        height: 40px;
    }
}
.mask {
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    transition: 0.3s;
    .mask-content {
        width: 100%;
        max-height: 250px;
        background: #f3f3f3;
        transform: translateY(100%);
        transition: 0.3s;
        .item {
            border-bottom: 1px solid #ececec;
            padding: 10px 20px;
        }
        .active {
            color: #3388ff;
        }
    }
    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.4);
        .mask-content {
            transform: translateY(0);
        }
    }
}
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 500px;
        height: 600px;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        position: relative;
        .item-fixed-top {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #ececec;
            .title {
                font-size: 18px;
                font-weight: bold;
            }
            .close {
                position: absolute;
                right: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }
}
.bg-color {
    background: #e6e6e6;
    padding: 10px;
}
.cate-list {
    height: 100%; //calc(100vh + 51px);
    font-size: 14px;
    color: #333;
    padding-bottom: 40px;
    .info-box {
        padding: 10px;
        .s-r-box {
            display: flex;
            .s-r-b {
                // text-align: center;
                .a-txt {
                    font-size: 20px;
                    font-weight: bold;
                    color: #3388ff;
                }
                .a-txt-red {
                    color: red;
                }
            }
            .s-r-b-pl {
                padding-left: 80px;
            }
        }
        .i-f-box {
            display: flex;
            color: #999;
            .txt-box {
                text-align: center;
                padding-right: 30px;
            }
        }
    }
    .d-box {
        margin-bottom: 40px;
        padding-bottom: 30px;
        .d-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #eee;
            padding: 10px 10px;
        }
        .d-list {
            // padding: 10px 0;
            cursor: pointer;
            .t-n-c {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: #f3f3f3;
                padding: 5px 10px;
            }
        }
        .g-list {
            display: flex;
            position: relative;
            padding: 5px 10px;
            // padding-top: 5px;
            // padding-bottom: 5px;
            .img {
                width: 50px;
                height: 50px;
                border-radius: 4px;
                overflow: hidden;
            }
            .g-n-b-box {
                width: calc(100% - 50px);
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .g-n-b {
                    padding-left: 10px;
                    // width: calc(100% - 60px);
                    width: 100%;
                    .brand {
                        color: #999;
                    }
                    .info-box-txt {
                        color: #999;
                        display: flex;
                        width: 100%;
                        .info-txt {
                            flex: 1;
                            margin-right: 5px;
                            &:last-child {
                                margin: 0;
                            }
                        }
                    }
                }
                .u-i {
                    color: #999;
                    // position: absolute;
                    right: 10px;
                    bottom: 6px;
                    text-align: right;
                }
            }
        }
    }
}
</style>